import React, { Component } from 'react';
import { withRouter } from 'react-router-dom'
import './index.scss'
import { Icon } from 'antd'
import Main from '../../components/Main'
import Sider from '../../components/Sider'
import Header from '../../components/Header'
import celeImg from '../../assets/img/celebrate.png'
import celeLogoImg from '../../assets/img/celebrateLogo.png'
import celeCloseImg from '../../assets/img/celebrateClose.png'

// 判断是否从同一菜单过来
let isAllMenu = sessionStorage.getItem('isAllMenu')
class Index extends Component {
    state = {
        collapsed: false,
        showCeleBox:false,//展示一周年
    };
    toggle = () => {
        this.setState({
            collapsed: !this.state.collapsed,
        });
    }

    // 控制一周年显示
    handleChangeCeleBox = (showCeleBox) => {
        this.setState({
            showCeleBox
        })

        localStorage.setItem('marketShowCele',showCeleBox)
    }


    // 查看一周年详情
    handleCeleDeteilClick = () => {
        this.setState({
            showCeleBox:false
        })
    }    


    getClienHeight = () => {
        var clientHeight = 0;
        if (document.body.clientHeight && document.documentElement.clientHeight) {
            var clientHeight = (document.body.clientHeight < document.documentElement.clientHeight) ? document.documentElement.clientHeight : document.body.clientHeight;
        } else {
            var clientHeight = (document.body.clientHeight > document.documentElement.clientHeight) ? document.body.clientHeight : document.documentElement.clientHeight;
        }

        return clientHeight;
    }

    componentWillMount(){
        if(localStorage.getItem("marketShowCele") == null){
            this.setState({
                showCeleBox:true
            })
        }
    }

    componentWillReceiveProps(newProps) {
        if (newProps.logOutStatus != this.props.logOutStatus) {
            //退出登录成功
            this.props.history.push('/login');
        }
    }

    render() {
        const { collapsed, showCeleBox } = this.state;
        const style = {
            height:isAllMenu=='true'?'100vh':this.getClienHeight() - 60,
            left:isAllMenu=='true'?0:(collapsed ? 80 : 254),
            top:isAllMenu=='true'?0:'60px'
        }
        const _width = collapsed ? 80 : 254;
        const _width1 = collapsed ? 130 : 290;
        return (
            <div className="layoutBox">
                {isAllMenu!='true' && <Header
                    editPasswordStatus={this.props.editPasswordStatus}
                    onCheckEditPasswordStatus={(data) => this.props.onCheckEditPasswordStatus(data)}
                    onCheckLogOutStatus={(data) => this.props.onCheckLogOutStatus(data)}
                >
                </Header>}
                {isAllMenu!='true' && <Icon
                    className="trigger"
                    type={this.state.collapsed ? 'menu-unfold' : 'menu-fold'}
                    onClick={this.toggle}
                    style={{ left: _width }}
                />}
                {/* 一周年 */}
                {/* <img className="celeImg" style={{ left: _width1 }} src={celeLogoImg} onClick={() => {this.handleChangeCeleBox(true)}} alt="" />                
                <div className={["birthdayModal",showCeleBox ? "" : "dn"].join(" ")}>
                    <div>
                        <a ><img src={celeCloseImg} onClick={() => {this.handleChangeCeleBox(false)}} alt="0" /></a>
                        <a href="http://login.mshiedu.com/onyears" target="_blank"><img src={celeImg} onClick={() => {this.handleCeleDeteilClick()}} alt="" /></a>
                    </div>
                </div> */}
                {isAllMenu!='true' && <nav style={{ width: _width }}>
                    <Sider collapsed={collapsed} />
                </nav>}
                <main style={style}>
                    <Main />
                </main>
            </div>
        )
    }
}

export default withRouter(Index);  
